<template>
  <div class="rating">
      <i class="iconfont " :class="[item <= value? 'icon-star1': 'icon-star',size==0? 'big':'normal'  ]" v-for="item in 5" :key="item" @click="changeValue(item)"></i>
  </div>
</template>

<script>

export default {
    props: {
        value: {
            type: Number,
            required: true
        },
        readonly: {
            type: Boolean,
            default: false
        },
        size: {
            type: Number,
            default: 0
        }
    },
  data () {
    return {

    };
  },

  components: {},

  computed: {},

  methods: {
      changeValue(v){
          if(!this.readonly){
              this.$emit("input",v);
          }
      }
  }
}

</script>
<style scoped>
    
    .big{
        font-size: 24px;
        margin-right: 5px; 
    }
    .normal{
        font-size: 20px;
        margin-right: 3px; 
    }
    .icon-star {
        color: #E1E1E3;
    } 
    .icon-star1 {
        color: #FFCA46;
    }
</style>